import React,{useEffect,useState} from 'react'
import { Descriptions, Button, Space } from 'antd';
import $axios from '../../../utils/axios';
import { ImgUrl } from '../../../utils/axios';
import axios from 'axios';
interface IProps{
    id:string,
    send:()=>void
   }

export default function ({id,send}:IProps) {

    let [resAll,setRes]=useState<any>({})
    
    // 用居民id 调接口
    let show=()=>{
        $axios({
            url:'/api/getResidentLabelHealthById',
            method:'post',
            data:{
                residentId:id
            }
        }).then((res)=>{
            console.log(res.data,'居民基本信息');
            setRes(res.data)
        })
    }
    
    // 返回主页
    let back=()=>{
        send()
    }
    
    // 页面渲染完成调接口
    useEffect(()=>{
        show()
    },[])
    return (   
        <div>
            <Descriptions title="居民信息" column={{ xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }}>
                <Descriptions.Item label="居民编号">{resAll.number}</Descriptions.Item>
                <Descriptions.Item label="姓名">{resAll.name}</Descriptions.Item>
                <Descriptions.Item label="头像" ><img src={ImgUrl+resAll.picture} alt="" style={{width:'50px',height:'50px',borderRadius:'25px',position:'relative',top:'-10px'}} /></Descriptions.Item>
                <Descriptions.Item label="身份证编号">{resAll.IDCard}</Descriptions.Item>
                <Descriptions.Item label="手机号码">
                   {resAll.tel}
                </Descriptions.Item>
                <Descriptions.Item label="居住地">
                   {resAll.address}
                </Descriptions.Item>
                <Descriptions.Item label="登录密码">
                    暂无
                </Descriptions.Item>
                <Descriptions.Item label="行政区别">
                    {resAll.district}
                </Descriptions.Item>

                <Descriptions.Item label="居民标签">
                    {resAll.labelArr && resAll.labelArr.map((i:any,j:number)=>{
                        debugger
                        return <div key={j}>{i.name}</div>
                    })
                    }
                </Descriptions.Item>
                <Descriptions.Item label="性别">
                    {resAll.gender? '女':'男'}
                </Descriptions.Item>
                <Descriptions.Item label="出生日期">
                    {resAll.birthday}
                </Descriptions.Item>
                <Descriptions.Item label="籍贯">
                    {resAll.nativePlace}
                </Descriptions.Item>
                <Descriptions.Item label="民族">
                    {resAll.nationId}
                </Descriptions.Item>
                <Descriptions.Item label="婚姻状况">
                    {resAll.maritalStatusId}
                </Descriptions.Item>
                <Descriptions.Item label="职业">
                    {resAll.career}
                </Descriptions.Item>
                <Descriptions.Item label="工作单位">
                    {resAll.workUnit}
                </Descriptions.Item>
                <Descriptions.Item label="紧急联系人">
                    {resAll.emergencyContact}
                </Descriptions.Item>
                <Descriptions.Item label="联系人电话">
                    {resAll.emergencyNumber}
                </Descriptions.Item>
                <Descriptions.Item label="户籍类型">
                    {resAll.residenceId}
                </Descriptions.Item>
                <Descriptions.Item label="费用类型">
                   {resAll.expenseTypeId}
                </Descriptions.Item>
                <Descriptions.Item label="指定医疗单位">
                    {resAll.designatedMedicalUnits}
                </Descriptions.Item>
                <Descriptions.Item label="来源">
                    {resAll.origin}
                </Descriptions.Item>
            </Descriptions>
            <div style={{ width: '100%', height: '1px', backgroundColor: '#ccc', marginTop: '10px', marginBottom: '30px' }}></div>
            <Descriptions title="健康信息" column={{ xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }}>
                <Descriptions.Item label="身高">{resAll?.health?.height}</Descriptions.Item>
                <Descriptions.Item label="体重">{resAll?.health?.weight}</Descriptions.Item>
                <Descriptions.Item label="血型">{resAll?.health?.bloodTypeId}</Descriptions.Item>
                <Descriptions.Item label="RH阴性">{resAll?.health?.rh==0&& '否' || resAll.health?.rh==1&& '是'||resAll.health?.rh==2&& '不详'}</Descriptions.Item>
                <Descriptions.Item label="过敏史">{resAll?.health?.allergyHistory ? "是":'否'}</Descriptions.Item>
                <Descriptions.Item label="既往史">{resAll?.health?.pastHistory ? "是":'否'}</Descriptions.Item>
                <Descriptions.Item label="就诊史">{resAll?.health?.medicalHistory ? "是":'否'}</Descriptions.Item>
                <Descriptions.Item label="家族病史">{resAll?.health?.familyHistory ? "是":'否'}</Descriptions.Item>
            </Descriptions>
            <div style={{ width: '100%', height: '1px', backgroundColor: '#ccc', marginTop: '10px', marginBottom: '30px' }}></div>
            {/* <Descriptions title="家庭 成员" >
                <Descriptions.Item >
                    <div style={{ width: '200px', height: '100px', border: '1px solid #ccc', borderRadius: '5px' }}></div>
                    <div style={{ width: '200px', height: '100px', border: '1px solid #ccc', borderRadius: '5px' }}></div>
                </Descriptions.Item>
            </Descriptions> */}
            <Space wrap>
                <Button type="primary">编辑档案信息</Button>
                <Button onClick={back}>返回</Button>
            </Space>
        </div>
    )
}
